<template>
<div>
  <RlButton @click="showMessageBox">showMessageBox</RlButton>
  <RlButton @click="showConfirmMessageBox">showConfirmMessageBox</RlButton>
</div>
</template>

<script setup lang="ts">
import MessageBox from '@/components/MessageBox/MessageBox'
import RlButton from '@/components/Button/Button.vue'
import {createMessage} from '@/components/Message/method'
defineOptions({
  name: 'MessageView'
})
const showMessageBox = ()=>{
  MessageBox({
    title: 'MessageBox',
    content: 'This is MessageBox content',
    confirmBtnText: 'ok'
  }).then(()=>{
    createMessage({
      message: 'action: confirm',
      type: 'info',
    })
  }).catch(()=>{
    console.log('MessageBox reject');
  })
}

const showConfirmMessageBox = ()=>{
  MessageBox({
    title: 'Warning',
    content: 'proxy will permanently delete the file. Continue?',
    confirmBtnText: 'ok',
    showCancelBtn: true,
    cancelBtnText: 'Cancel'
  }).then(()=>{
    createMessage({
      message: 'action: confirm',
      type: 'success',
    })
  }).catch(()=>{
    createMessage({
      message: 'action: cancel',
      type: 'info',
    })
  })
}

</script>

<style scoped>
div{
  margin: 10px;
}
</style>